<template>
	<view class="personal flex-column">
		<!-- #ifndef MP-TOUTIAO -->
		<uni-nav-bar height="80rpx" :statusBar='true' title="个人中心">
			<view class="u-nav-slot" slot="left">
				<u-icon name="list" size="27" @click="openSetting" color="#000000"></u-icon>
			</view>
		</uni-nav-bar>
		<!-- #endif -->
		<view class="person-info" @click="gosetting">
			<view class="user-avatar flex colum-gap-30" style="padding-left: 30rpx">
				<u-avatar :src="picHref" size="50"></u-avatar>
				<view class="flex-column row-gap-10">
					<view class="flex" style="align-items: center;column-gap: 10rpx;">
						<text class="font700" :user-select="true" style="text-overflow: ellipsis;white-space: nowrap;">{{
							user.username }}</text>
						<image @click="goSetting('设置')" src="../../static/edit.png" style="width: 30rpx;height: 30rpx;"></image>	
					</view>
					<text style="font-size: 0.8rem; font-weight: 300" :user-select="true">简介:{{ user.Signature }}</text>
					<view style="font-size: 0.8rem; font-weight: 300;display: flex;align-items: center;column-gap: 1rem;">
						<view>
							<image style="width: 1rem;height: 1rem;object-fit: cover;" :src="isVip ? globalIcon.vip : globalIcon.noVip"></image>
							<text>{{ isVip ? '会员用户' : '普通用户' }}</text>
						</view>
						<view v-if="isVip" style="display: flex;flex-direction: column;">
							<text>会员到期时间:</text>
							<text> {{expireTime}}</text>
						</view>
						<view>
							<u-button type="primary" text="开通会员" v-if="!isVip" size="mini" @click="jumpVip"></u-button>
							<u-button type="error" text="续费会员" v-else size="mini" @click="jumpVip"></u-button>
						</view>
					</view>
				</view>
			</view>
			<view class="user-info">
				<view class="container-text">
					<u-count-to :start-val="0" :end-val="user.edgeCount" :duration="2000" :useEasing="false"></u-count-to>
					<text>帖子</text>
				</view>
				<view class="container-text" @click="goFans">
					<u-count-to :start-val="0" :end-val="user.fans" :duration="2000" :useEasing="false">
					</u-count-to>
					<text>粉丝</text>
				</view>
				<view class="container-text">
					<u-count-to :start-val="0" :end-val="user.follows" :duration="2000" :useEasing="false">
					</u-count-to>
					<text>关注</text>
				</view>
			</view>
		</view>
		<tab :datas="icons"></tab>
		<view class="flex1">
			<view v-if="showEdge" class="container-flex" style="
          justify-content: flex-start;
          column-gap: 3rpx;
          padding: 0 0;
          padding-left: 4rpx;
        ">
				<view class="container-flex-item" v-for="(item, index) in userEdge" :key="item.pk">
					<home-item :config="item" :isUser="true" :itemId="index"></home-item>
				</view>
			</view>
			<view v-else class="flex-column center h100 w100 row-gap-10">
				<text class="font700">主页</text>
				<text>分享的照片和视频将显示在你的主页中</text>
				<!-- <text class="blue" @click="share">快来分享照片或视频吧!</text> -->
				<!-- 				<button @getphonenumber="phoneNumber" open-type="getPhoneNumber">打开设置</button> -->
			</view>
		</view>
		<drawer>
			<template>
				<view @click="goSetting(item.text)" v-for="(item, index) in setttings" :key="index"
					class="flex colum-gap-10 pt10 padding-cross-10 margin-vertical-10 draw-item">
					<u-icon size="25" :name="item.icon"></u-icon>
					<text class="font700">{{ item.text }}</text>
				</view>
			</template>
		</drawer>
	</view>
</template>

<script>
import Config from "@/common/config.js";
import HomeItem from "@/pages/home/home-item.vue";
import {
	getMedias,
	getUserEdge
} from "@/api/app/api.js"
export default {
	data() {
		return {
			icons: [{
				type: "icon",
				icon: Config.base_Url + "icons/grid.png",
				size: 18,
			},
			{
				type: "icon",
				icon: Config.base_Url + "icons/video.png",
			},
			],
			setttings: [{
				icon: Config.base_Url + "icons/add-friend.png",
				text: "添加好友",
			},
			{
				icon: Config.cloud_url + "icons/edge.png",
				text: "发布帖子",
			},
			{
				icon: Config.base_Url + "icons/setting.png",
				text: "设置",
			},
			{
				icon: Config.base_Url + "icons/collec.png",
				text: "我的收藏",
			},
			{
				icon: Config.base_Url + "icons/feedback.png",
				text: "反馈错误",
			}
			],
			curryTabIndex: 0,
			showSetting: false,
			showEdge:false,
		};
	},
	components: {
		HomeItem,
	},
	methods: {
		gosetting() {
			uni.navigateTo({
				url: "/pages/personal/personal-setting",
				success: (res) => {
					res.eventChannel.emit("assectData", this.user);
				},
			});
		},
		openSetting() {
			this.$store.commit("setMask", true);
		},
		share() {
			uni.navigateTo({
				url: "/subA/upload/edge",
			});
		},
		closeMask(val) {
			this.$store.commit("setMask", false);
		},
		tabClick(index) {
			this.curryTabIndex = index;
		},
		phoneNumber(res) {
			console.log(res);
			wx.authorize({
				scope: "",
			});
		},
		goFans() {
			uni.navigateTo({
				url: `/pages/personal/personal-fans?username=${this.user.username}&fans=${this.user.fans}&fllower=${this.user.follows}`,
			});
		},
		goSetting(text) {
			if (text === "添加好友") {
				uni.navigateTo({
					url: "/pages/friend/search",
				});
			} else if (text === "设置") {
				uni.navigateTo({
					url: "/pages/personal/personal-setting",
					success: (res) => {
						res.eventChannel.emit("assectData", this.user);
					},
				});
			} else if (text === "发布帖子") {
				// console.log("暂未开放");
				// wx.showToast({
				//   title: "暂未开放",
				// });
				uni.navigateTo({
					url: '/subA/upload/edge'
				})
			} else if (text = "反馈错误") {
				// console.log("我的收藏");
				uni.navigateTo({
					url: '/pages/personal/personal-feedback',
				})
			} else {
				console.log("我的收藏");
			}
		},
		navigationDetail() {
			uni.navigateTo({
				url: "/subA/detail/detail",
			});
		},
		jumpVip(){
			wx.navigateTo({
				url: "/pages/personal/pay"
			})
		},
	},
	computed: {
		cards() {
			return this.$store.getters.getUser?.cards ?? 0;
		},
		fans() {
			return this.$store.getters.getUser?.fans ?? 0;
		},
		follows() {
			return this.$store.getters.getUser?.follows ?? 0;
		},
		picHref() {
			if (this.$store.getters.getUser?.avatar?.includes('cloud://')) return this.$store.getters.getUser.avatar;
			return Config.cloud_url + this.$store.getters.getUser.avatar;
		},
		username() {
			return this.$store.getters.getUser?.username ?? "登录";
		},
		user() {
			return this.$store.getters.getUser;
		},
		userEdge() {
			console.log(this.$store.getters.getUserEdge);
			return this.$store.getters.getUserEdge;
		},
		expireTime(){
			let isVipExpire = this.$store.getters.getUser.isVipExpire
			return isVipExpire
		},
		isVip(){
			let user = this.$store.getters.getUser
			return user.isVip == 1 && user.isVipExpire != 0 && (new Date(user.isVipExpire) - new Date()) > 0
		},
	},
	async onLoad(params) {
		uni.showTabBar()
		getUserEdge({
			page:1,
			openid: this.user.openid
		}).then(res=>{
			console.log('res',res)
			this.$store.commit("setUserEdge", res.data ?? []);
		}).catch(err=>{
			console.log('err',err)
		})
		uni.hideLoading()
	},
};
</script>

<style lang="scss" scoped>
.personal {
	width: 100%;
	height: 100%;
}

.user-avatar {
	align-items: center;
	row-gap: 8rpx;
	margin-top: 20rpx;
}

.user-info {
	display: flex;
	justify-content: space-around;
	margin: 20rpx 0;
}

.draw-item:nth-child(1){
	margin-top: 20px;
}
</style>